<template>
	<view style="height:100vh">
		<layout layoutTitle="能耗监控">
			<view class="energy-monitor-container">
				<view class="dashboard-header">
					<view class="header-title">
						<uni-icons type="bars" size="24" color="#27ae60"></uni-icons>
						<text>企业能耗实时监控</text>
					</view>
					<view class="header-stats">
						<view class="stat-card">
							<text class="stat-value">42</text>
							<text class="stat-label">设备总数</text>
						</view>
						<view class="stat-card">
							<text class="stat-value">36</text>
							<text class="stat-label">正常运行</text>
						</view>
						<view class="stat-card status-warning">
							<text class="stat-value">6</text>
							<text class="stat-label">警告状态</text>
						</view>
					</view>
				</view>
				
				<view class="monitor-grid">
					<view class="monitor-item" v-for="(item, index) in list" :key="index">
						<view class="card-container" :class="[getStatus(item)]">
							<view class="card-header">
								<view class="device-info">
									<text class="device-name">{{ item.name }}</text>
									<text class="device-location">{{ item.location }}</text>
								</view>
								<view class="device-status" :class="[getStatus(item)]">
									<uni-icons :type="getStatusIcon(item)" size="20" :color="getStatusColor(item)"></uni-icons>
									<text>{{ getStatusText(item) }}</text>
								</view>
							</view>
							
							<view class="device-metrics">
								<view class="metric">
									<view class="metric-icon">⚡</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.power }}</text>
										<text class="metric-unit">kW</text>
									</view>
									<text class="metric-label">实时功率</text>
								</view>
								
								<view class="metric">
									<view class="metric-icon">🔌</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.voltage }}</text>
										<text class="metric-unit">V</text>
									</view>
									<text class="metric-label">电压</text>
								</view>
								
								<view class="metric">
									<view class="metric-icon">🔄</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.energy }}</text>
										<text class="metric-unit">kWh</text>
									</view>
									<text class="metric-label">今日能耗</text>
								</view>
							</view>
							
							<view class="device-footer">
								<view class="usage-indicator">
									<view class="usage-bar">
										<view class="usage-progress" :style="{ width: getEnergyPercentage(item) }"></view>
									</view>
									<text class="usage-text">能效利用率: {{ getEnergyPercentage(item) }}</text>
								</view>
								<view class="carbon-impact">
									<uni-icons type="cloud" size="16" color="#27ae60"></uni-icons>
									<text>碳排放量: {{ calculateCarbon(item) }} kg</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';

	const list = reactive([{
			name: '冲压设备A1',
			location: '一车间',
			power: '56.8',
			voltage: '380',
			energy: '456.2',
			status: 1
		},
		{
			name: '注塑机组J2',
			location: '二车间',
			power: '128.5',
			voltage: '380',
			energy: '987.3',
			status: 1
		},
		{
			name: '装配线T1',
			location: '三车间',
			power: '42.3',
			voltage: '220',
			energy: '341.8',
			status: 2
		},
		{
			name: '空压机组K1',
			location: '动力车间',
			power: '75.6',
			voltage: '380',
			energy: '592.5',
			status: 1
		},
		{
			name: '焊接设备F1',
			location: '四车间',
			power: '97.2',
			voltage: '380',
			energy: '604.9',
			status: 3
		},
		{
			name: '研磨机组M2',
			location: '精加工车间',
			power: '64.1',
			voltage: '380',
			energy: '524.7',
			status: 2
		},
		{
			name: '涂装线P1',
			location: '涂装车间',
			power: '85.3',
			voltage: '380',
			energy: '718.6',
			status: 1
		},
		{
			name: '测试平台S3',
			location: '品检车间',
			power: '32.7',
			voltage: '220',
			energy: '186.4',
			status: 1
		}
	]);

	const getStatus = (item) => {
		if (item.status === 1) {
			return 'status-normal';
		} else if (item.status === 2) {
			return 'status-warning';
		} else if (item.status === 3) {
			return 'status-danger';
		}
	};
	
	const getStatusIcon = (item) => {
		if (item.status === 1) {
			return 'checkbox-filled';
		} else if (item.status === 2) {
			return 'info-filled';
		} else if (item.status === 3) {
			return 'closeempty';
		}
	};
	
	const getStatusColor = (item) => {
		if (item.status === 1) {
			return '#27ae60';
		} else if (item.status === 2) {
			return '#f39c12';
		} else if (item.status === 3) {
			return '#e74c3c';
		}
	};
	
	const getStatusText = (item) => {
		if (item.status === 1) {
			return '正常运行';
		} else if (item.status === 2) {
			return '能耗偏高';
		} else if (item.status === 3) {
			return '需检修';
		}
	};
	
	const getEnergyPercentage = (item) => {
		// 模拟计算能效利用率
		const efficiency = Math.floor(65 + Math.random() * 25) + '%';
		return efficiency;
	};
	
	const calculateCarbon = (item) => {
		// 模拟计算碳排放量
		return (parseFloat(item.energy) * 0.527).toFixed(1);
	};
</script>

<style scoped>
	.energy-monitor-container {
		padding: 30rpx;
		min-height: 100vh;
		background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	}
	
	.dashboard-header {
		margin-bottom: 40rpx;
		animation: fadeIn 0.5s ease forwards;
	}
	
	.header-title {
		display: flex;
		align-items: center;
		gap: 16rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 24rpx;
	}
	
	.header-stats {
		display: flex;
		gap: 20rpx;
		overflow-x: auto;
		padding-bottom: 10rpx;
	}
	
	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: white;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		min-width: 150rpx;
		box-shadow: 0 4rpx 16rpx rgba(39, 174, 96, 0.1);
		border: 1px solid rgba(39, 174, 96, 0.1);
	}
	
	.stat-value {
		font-size: 48rpx;
		font-weight: 700;
		color: #27ae60;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 4rpx;
	}
	
	.status-warning .stat-value {
		color: #f39c12;
	}
	
	.monitor-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
		gap: 30rpx;
	}
	
	.monitor-item {
		animation: fadeIn 0.5s ease forwards;
		animation-delay: calc(0.1s * var(--i, 0));
	}
	
	.card-container {
		background: white;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.12);
		border-top: 4rpx solid #27ae60;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.card-container:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 30rpx rgba(39, 174, 96, 0.18);
	}
	
	.card-container.status-warning {
		border-top-color: #f39c12;
	}
	
	.card-container.status-danger {
		border-top-color: #e74c3c;
	}
	
	.card-header {
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border-bottom: 1px solid rgba(39, 174, 96, 0.1);
	}
	
	.device-info {
		display: flex;
		flex-direction: column;
	}
	
	.device-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.device-location {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 4rpx;
	}
	
	.device-status {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
		background: rgba(39, 174, 96, 0.1);
		color: #27ae60;
	}
	
	.device-status.status-warning {
		background: rgba(243, 156, 18, 0.1);
		color: #f39c12;
	}
	
	.device-status.status-danger {
		background: rgba(231, 76, 60, 0.1);
		color: #e74c3c;
	}
	
	.device-metrics {
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.metric {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}
	
	.metric-icon {
		font-size: 32rpx;
		margin-bottom: 4rpx;
	}
	
	.metric-data {
		display: flex;
		align-items: baseline;
		gap: 4rpx;
	}
	
	.metric-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.metric-unit {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.metric-label {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.device-footer {
		padding: 24rpx;
		background: #f6fbf8;
	}
	
	.usage-indicator {
		margin-bottom: 16rpx;
	}
	
	.usage-bar {
		height: 12rpx;
		background: rgba(127, 140, 141, 0.1);
		border-radius: 100rpx;
		margin-bottom: 8rpx;
		overflow: hidden;
	}
	
	.usage-progress {
		height: 100%;
		background: linear-gradient(90deg, #27ae60, #2ecc71);
		border-radius: 100rpx;
	}
	
	.usage-text {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.carbon-impact {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #27ae60;
	}
	
	@keyframes fadeIn {
		from { 
			opacity: 0;
			transform: translateY(20rpx);
		}
		to { 
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@media (max-width: 768px) {
		.monitor-grid {
			grid-template-columns: 1fr;
		}
		
		.header-stats {
			flex-wrap: wrap;
		}
		
		.stat-card {
			flex: 1;
			min-width: 110rpx;
		}
	}
</style>